<template>
	<view class="my-swiper-container">
		<swiper class="swiper-container" :circular="true" :indicator-dots="false" :autoplay="true" :interval="3000"
			:duration="1000" indicator-color="#888888" indicator-active-color="#007BFF">
			<swiper-item v-for="(img, index) in images" :key="index">
				<image :src="img" mode="aspectFill" class="swiper-image"></image>
			</swiper-item>
		</swiper>
	</view>

	<view class="notice">
		<image src="../../static/公告.png" mode="aspectFill" class="icon"></image>
		<swiper style="width: 80vw; height: 25px;" vertical :indicator-dots="false" :circular="true" :autoplay="true"
			:interval="3000" :duration="1000">
			<swiper-item class="notice_text" v-for="(text ,index) in notice_text" :key="index">
				{{text}}
			</swiper-item>
		</swiper>

	</view>
	<view class="box">
		<template v-if="display">
			<view class="box1_1">
				您还没有添加卡/设备
				<view class="button1">
					点击添加
				</view>
			</view>
		</template>
		<template v-else>
			<view class="box1_2">
				<view class="topnumber">
					<view class="number">
						{{ user_data.Number }}
						<p class="p_label">当前充值号</p>
					</view>
					<navigator class="button2" url="/pages/detail/detail">
						详情
					</navigator>
				</view>
				<view>
					<uni-grid :column="4" :showBorder="false" style="height: 20vw;" :highlight="false">
						<uni-grid-item>
							<view class="grid-item-box">
								<p class="plable">已用流量</p>
								<p class="plable">{{user_data.Used_traffic}}G</p>
							</view>

						</uni-grid-item>
						<uni-grid-item>
							<view class="grid-item-box">
								<p class="plable">剩余流量</p>
								<p class="plable">{{user_data.Remaining_traffic}}G</p>
							</view>

						</uni-grid-item>
						<uni-grid-item>
							<view class="grid-item-box">
								<p class="plable">卡余额</p>
								<p class="plable">{{user_data.Balance}}元</p>
							</view>

						</uni-grid-item>
						<uni-grid-item>
							<view class="grid-item-box">
								<p class="plable">剩余天数</p>
								<p class="plable">{{user_data.Days_remaining}}天</p>
							</view>

						</uni-grid-item>
					</uni-grid>
				</view>
				<view class="sanjiao">
					<view class="triangle-up">
					</view>
					<view class="renew">
						<view>实时更新</view>
						<view class="button3">
							点击刷新
						</view>
					</view>
				</view>
			</view>
		</template>

		<view class="box2">
			<uni-grid :column="4" :showBorder="false">
				<uni-grid-item v-for="item in icon_test" :key="item.id">
					<view class="icons" @click="goToDetailPage(item)">
						<view class="external">
							<view class="internal">
								<image class="icons_image" :src="item.img" mode="aspectFill"></image>
							</view>
						</view>
						<text style="font-size: 14px;">{{item.text}}</text>
					</view>
				</uni-grid-item>

			</uni-grid>
		</view>
	</view>
	<uni-popup ref="popupa" type="center">
		<view class="popup-content">
			<view style="text-align: center; padding: 5px;">
				<text style="color: blue; font-size: 18px;">当前状态</text>
			</view>
			<view style="font-size: 14px;">
				<view style="padding: 5px;">
					<text>充值号：{{user_data.Number}}</text>
				</view>
				<view style="padding: 5px;">
					<text>余额：{{user_data.Balance}}</text>
				</view>
				<view style="padding: 5px;">
					<text>状态：</text>
					<text style="color: blue;">正常运行</text>
				</view>
				<view style="padding: 5px;">
					<text>流量查询：流量总额为300G 剩余：{{user_data.Remaining_traffic}}G</text>
				</view>
				<view style="padding: 5px;">
					<text>当前套餐：月享300G套餐</text>
				</view>
				<view style="padding: 5px;">
					<text>官方实名：已实名</text>
				</view>
				<view style="padding: 5px;">
					<text>套餐生效时间：2024-08-27 13:39:48</text>
				</view>
				<view style="padding: 5px;">
					<text>套餐到期时间：2024-08-27 13:39:48</text>
				</view>
			</view>
			<view style="text-align: center; padding: 10px;">
				<text style="color: red; font-size: 14px;">设备重启后可点击更新复机</text>
			</view>
		</view>
	</uni-popup>
	<uni-popup ref="popupb" type="center">
		<view class="popup-content">
			<view class="istop">
				<text>切换网络</text>
			</view>
			<view class="isbox" v-for="(item,index) in qhwl" :key="index" @click="ischange=item">
				<view>
					<text>{{item}}</text>
				</view>
				<view class="button" :class="ischange==item?'it_ok':'it_no'">
				</view>
			</view>
			<view class="is_ok" @click="popupb.close()">
				<text>确定</text>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const popupa = ref();
	const popupb = ref();
	const user_data = ref({
		Telephone: '98989898989', //电话号码
		Number: '12345678910', //充值号
		Used_traffic: '128', //已用流量
		Remaining_traffic: '128', //剩余流量
		Balance: '0', //卡余额
		Days_remaining: '2', //剩余天数
	})
	const display = ref(false)
	const images = ref([
		"../../static/banner.png",
		"../../static/darling1.jpg",
		"../../static/darling2.jpg",
		"../../static/darling3.jpg",
		"../../static/darling4.jpg"
	]);
	const notice_text = ref([
		'公告1，这是公告1',
		'公告2，这是公告2',
		'公告3，这是公告3',
	]);
	const icon_test = ref([{
			id: '1',
			img: '../../static/icons/充值.png',
			text: '余额充值',
			url: '/pages/balance/balance'
		}, {
			id: '2',
			img: '../../static/icons/订购.png',
			text: '套餐订购',
			url: '/pages/order/order'
		}, {
			id: '3',
			img: '../../static/icons/话费.png',
			text: '赠送话费',
			url: '/pages/phone_bill/phone_bill'
		}, {
			id: '4',
			img: '../../static/icons/检测.png',
			text: '智能检测',
			url: '/pages/index/index'
		}, {
			id: '5',
			img: '../../static/icons/记录.png',
			text: '套餐记录',
			url: '/pages/package_record/package_record'
		}, {
			id: '6',
			img: '../../static/icons/列表.png',
			text: '充值记录',
			url: '/pages/recharge_record/recharge_record'
		}, {
			id: '7',
			img: '../../static/icons/流量.png',
			text: '流量记录',
			url: '/pages/discharge_record/discharge_record'
		}, {
			id: '8',
			img: '../../static/icons/实名认证.png',
			text: '实名认证',
			url: '/pages/authentication/authentication'
		}, {
			id: '9',
			img: '../../static/icons/设备.png',
			text: '我的设备',
			url: '/pages/device/device'
		}, {
			id: '10',
			img: '../../static/icons/切换.png',
			text: '切换网络',
			url: '/pages/index/index'
		}

	]);

	function goToDetailPage(item) {
		if (item.id == 4) {
			popupa.value.open()
		} else if (item.id == 10) {
			popupb.value.open()
		} else {
			uni.navigateTo({
				url: item.url
			})
		}

	};
	const qhwl = ref([
		'智能优选',
		'中国电信',
		'中国联通',
		'中国移动'
	])
	const ischange = ref('智能优选')
</script>

<style lang="scss" scoped>
	.my-swiper-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 45vw;
		width: 94vw;
		margin: 3vw;
		border-radius: 15px;
		overflow: hidden;
		position: relative;
	}

	.swiper-container {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.notice {
		background-color: rgb(255, 255, 255);
		width: 90vw;
		height: 10vw;
		padding: 0 5vw;
		display: flex;
	}

	.notice_text {
		width: 80vw;
		height: 20px;
	}

	.icon {
		height: 6vw;
		width: 6vw;
		margin-right: 2vw;
		display: inline;
	}

	.box {
		background-color: rgb(237, 237, 237);
		width: 94vw;
		height: 150vw;
		padding: 3vw;
	}

	.box1_1 {
		background-color: rgb(255, 255, 255);
		border-radius: 5px;
		width: 94vw;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.box1_2 {
		background-image: linear-gradient(#6BA6FF, #0165F9);
		border-radius: 5px;
		width: 90vw;
		height: 45vw;
		padding: 2vw;
		/* display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column; */
	}

	.topnumber {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #FFFFFF;

	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		color: #FFFFFF;
	}

	.number {
		/* font-size: 12px; */
		width: 48vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.p_label {
		border: 1px solid #FFFFFF;
		font-size: 13px;
		border-radius: 2px;
	}

	.plable {
		padding: 2px;
	}

	.button2 {
		width: 18vw;
		border-radius: 10px;
		background-color: #8AB9FE;
		color: #FFFFFF;
		text-align: center;
	}

	.box2 {
		margin-top: 5vw;
		background-color: rgb(255, 255, 255);
		border-radius: 5px;
		width: 86vw;
		padding: 4vw;
	}

	.button1 {
		width: 25vw;
		background-color: blue;
		color: rgb(255, 255, 255);
		text-align: center;
		font-size: 15px;
		padding: 5px;
		border-radius: 20px;
	}

	.triangle-up {
		width: 0;
		height: 0;
		margin-left: 8vw;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom: 15px solid #5396FC;
	}

	.renew {
		width: 80vw;
		height: 12vw;
		padding: 0 5vw;
		color: #FFFFFF;
		background-color: #5396FC;
		border-radius: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.button3 {
		width: 20vw;
		border-radius: 50px;
		padding: 5px;
		font-size: 15px;
		background-color: #2BB222;
		text-align: center;
	}


	.icons {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.external {
		width: 55%;
		height: 55%;
		background-color: #E7F1FF;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.internal {
		width: 70%;
		height: 70%;
		background-color: #0064F9;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.icons_image {
		width: 25px;
		height: 25px;
	}

	.popup-content {
		background-color: #fff;
		border-radius: 10px;
		padding: 5px 20px;
		width: 70vw;

		.istop {
			color: #0165F9;
			text-align: center;
			margin: 3vw;
		}

		.isbox {
			padding: 3vw 1vw;
			margin: 0 2vw;
			display: flex;
			color: #606266;
			justify-content: space-between;
			border-bottom: 1px solid rgb(229, 229, 229);

			.button {
				width: 17px;
				height: 17px;
				border-radius: 2px;

			}

			.it_ok {
				background-color: #0165F9;
				padding: 1px;
				background-image: url("../../static/选中1.png");
				background-repeat: no-repeat;
				background-size: 80% 80%;
				background-position: center;
			}

			.it_no {
				border: 1px solid rgb(199, 199, 199);
			}
		}

		.is_ok {
			margin: 5vw 24vw;
			padding: 5px;
			border-radius: 10vw;
			background-color: #0055ff;
			text-align: center;
			color: white;
			font-size: 15px;
		}
	}
</style>